<!DOCTYPE html>
<html style="overflow: hidden;">
<input type="hidden" value="${ctx}" id="basePath">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>试题导入</title>
    <link href="${ctx}/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx}/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx}/css/animate.min.css" rel="stylesheet">
    <link href="${ctx}/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <!--单选框样式-->
    <link href="${ctx}/css/labelauty.css" rel="stylesheet"/>
    <script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx}/js/plugins/layer/layer1.js"></script>
    <script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
    <!--单选框js-->
    <script src="${ctx}/js/labelauty.js"></script>
    <style type="text/css">
        .check-image {
            background: url(${ctx}/images/input-unchecked.png) no-repeat;
        }
        .control-label {
            text-align: right;
        }

        .vertical-timeline-content {
            padding:0;
            background: #f5f5f5;
        }
    </style>
    <!--文件上传-->
    <style type="text/css">
        .file {
            position: relative;
            height: 40px;
            line-height: 40px;
            border: 0;
            background-color: #f5f5f5;
        }

        .file label {
            display: inline-block;
        }

        .file-style-user-define {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            height: 40px;
            line-height: 40px;
            font-size: 0;

            /*应对子元素为 inline-block 引起的外边距*/
        }

        .file-style-user-define input[type="text"] {
            display: inline-block;
            vertical-align: middle;
            width: 360px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

        }

        .file input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
            opacity: 0;
            width: 380px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
        }
        .ibox-content {
            margin: 0;
            padding: 0;
            clear: none;
        }
        .form-group {
            margin-bottom: 0;
        }
        .vertical-timeline-block{
            margin: 0;
            padding: 0;
            border-bottom: 1px solid white;
        }
        .wrapper-content{
            padding: 0;
        }
        .footer{
            color: red;
        }
    </style>
</head>
<body class="gray-bg" style="overflow-x: hidden; overflow-y: hidden;">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>试题导入流程: &nbsp;
                        <span style="color: orangered;">选择试题分类→下载模版→(打开压缩文件)→(查看填写要求)→(填写模板)→选择文件→导入</span>
                    </h5>
                </div>
                <div class="ibox-content" style="min-height: 500px;">
                    <form class="form-horizontal" enctype="multipart/form-data" id="form-exam-import">
                        <div id="vertical-timeline" class="vertical-container light-timeline" style="margin-top: 0px">
                            <!--选择试题分类-->
                            <div class="vertical-timeline-block">

                                <div class="vertical-timeline-icon navy-bg">
                                    <i class="fa fa-hand-o-right"></i>
                                </div>

                                <div class="vertical-timeline-content">
                                    <h5 style="color: #1c84c6;">选择试题分类</h5>
                                    <p>
                                    <div class="form-group" style="border-bottom: 1px solid white;">
                                        <label class="col-md-2 control-label">问答题</label>
                                        <div class="col-md-9">
                                            <div class="rdo">
                                                <!--腧穴-->
                                                <input type="radio" name="category" value="1" class="rdolist" checked="checked"/>
                                                <label class="rdobox" radio-exam-category-val="1">
                                                    <span class="check-image"></span>
                                                    <span class="radiobox-content">腧&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;穴</span>
                                                </label>
                                                <!--内科-->
                                                <input type="radio" name="category" value="2" class="rdolist"/>
                                                <label class="rdobox" radio-exam-category-val="2">
                                                    <span class="check-image"></span>
                                                    <span class="radiobox-content">内&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;科</span>
                                                </label>
                                                <!--伤科-->
                                                <input type="radio" name="category" value="3" class="rdolist"/>
                                                <label class="rdobox" radio-exam-category-val="3">
                                                    <span class="check-image"></span>
                                                    <span class="radiobox-content">伤&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;科</span>
                                                </label>
                                                <!--妇科-->
                                                <input type="radio" name="category" value="4" class="rdolist"/>
                                                <label class="rdobox" radio-exam-category-val="4">
                                                    <span class="check-image"></span>
                                                    <span class="radiobox-content">妇&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;科</span>
                                                </label>
                                                <!--儿科-->
                                                <input type="radio" name="category" value="5" class="rdolist"/>
                                                <label class="rdobox" radio-exam-category-val="5">
                                                    <span class="check-image"></span>
                                                    <span class="radiobox-content">儿&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;科</span>
                                                </label>
                                                <!--触诊-->
                                                <input type="radio" name="category" value="6" class="rdolist"/>
                                                <label class="rdobox" radio-exam-category-val="6">
                                                    <span class="check-image"></span>
                                                    <span class="radiobox-content">触&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;诊</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group" style="border-bottom: 1px solid white;">
                                        <label class="col-md-2 control-label">穴位定位</label>
                                        <div class="col-md-9">
                                            <div class="rdo">
                                                <!--成人穴位-->
                                                <input type="radio" name="category" value="8" class="rdolist"/>
                                                <label class="rdobox" radio-exam-category-val="8">
                                                    <span class="check-image"></span>
                                                    <span class="radiobox-content">成人穴位</span>
                                                </label>
                                                <!--儿科穴位-->
                                                <input type="radio" name="category" value="7" class="rdolist"/>
                                                <label class="rdobox" radio-exam-category-val="7">
                                                    <span class="check-image"></span>
                                                    <span class="radiobox-content">儿科穴位</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group" style="border-bottom: 1px solid white;">
                                        <label class="col-md-2 control-label">单项手法</label>
                                        <div class="col-md-9">
                                            <div class="rdo">
                                                <!--成人手法-->
                                                <input type="radio" name="category" value="10" class="rdolist"/>
                                                <label class="rdobox" radio-exam-category-val="10">
                                                    <span class="check-image"></span>
                                                    <span class="radiobox-content">成人手法</span>
                                                </label>
                                                <!--儿科手法-->
                                                <input type="radio" name="category" value="9" class="rdolist"/>
                                                <label class="rdobox" radio-exam-category-val="9">
                                                    <span class="check-image"></span>
                                                    <span class="radiobox-content">儿科手法</span>
                                                </label>
                                                <!--触诊诊断-->
                                                <input type="radio" name="category" value="11" class="rdolist"/>
                                                <label class="rdobox" radio-exam-category-val="11">
                                                    <span class="check-image"></span>
                                                    <span class="radiobox-content">触诊诊断</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group" >
                                        <label class="col-md-2 control-label">成套手法</label>
                                        <div class="col-md-9">
                                            <div class="rdo">
                                                <!--伤科-->
                                                <input type="radio" name="category" value="13" class="rdolist"/>
                                                <label class="rdobox" radio-exam-category-val="13">
                                                    <span class="check-image"></span>
                                                    <span class="radiobox-content">伤&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;科</span>
                                                </label>
                                                <!--内科-->
                                                <input type="radio" name="category" value="12" class="rdolist"/>
                                                <label class="rdobox" radio-exam-category-val="12">
                                                    <span class="check-image"></span>
                                                    <span class="radiobox-content">内&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;科</span>
                                                </label>
                                                <!--妇科-->
                                                <input type="radio" name="category" value="14" class="rdolist"/>
                                                <label class="rdobox" radio-exam-category-val="14">
                                                    <span class="check-image"></span>
                                                    <span class="radiobox-content">妇&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;科</span>
                                                </label>
                                                <!--儿科-->
                                                <input type="radio" name="category" value="15" class="rdolist"/>
                                                <label class="rdobox" radio-exam-category-val="15">
                                                    <span class="check-image"></span>
                                                    <span class="radiobox-content">儿&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;科</span>
                                                </label>

                                            </div>
                                        </div>
                                    </div>
                                    </p>
                                </div>
                                <div style="color: #1ab394;font-size:25px;position:absolute;height:55%;width:10%;bottom:0px;">&#8595;</div>
                            </div>
                            <!--下载模版-->
                            <div class="vertical-timeline-block">
                                <div class="vertical-timeline-icon blue-bg">
                                    <i class="fa fa-cloud-download"></i>
                                </div>
                                <div class="vertical-timeline-content">
                                    <h5 style="color: #1c84c6;">下载模版</h5>
                                    <p>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">说明</label>
                                        <div class="col-md-4 control-label" style="text-align: left;color: #0e9aef;">
                                            <span class="vertical-date">
                                                <small>请点击右侧下载按钮进行模板下载</small>
                                            </span>
                                        </div>
                                        <div class="col-md-1">
                                            <a href="#" onclick="downloadExamTemplate()" class="btn btn-sm btn-success"> 下载模板 </a>
                                        </div>
                                    </div>
                                    </p>
                                </div>
                                <div style="color: #1ab394;font-size:25px;position:absolute;width:10%;bottom:0px;">&#8595;</div>
                            </div>
                            <!--选择文件-->
                            <div class="vertical-timeline-block">
                                <div class="vertical-timeline-icon lazur-bg">
                                    <i class="fa fa-file-word-o"></i>
                                </div>

                                <div class="vertical-timeline-content">
                                    <h5 style="color: #1c84c6;">选择文件</h5>
                                    <p>
                                    <div class="form-group ">
                                        <label class="col-md-2 control-label">选择文件 </label>
                                        <div class="col-md-6 file ">
                                            <div class="col-md-4 file-style-user-define">
                                                <input type="text" id="file-msg" value="请选择文件"  style="width: 500px">
                                                <input type="file" name="examFile" id="file-id" size="10">
                                            </div>
                                        </div>
                                    </div>
                                    </p>
                                </div>
                                <div style="color: #1ab394;font-size:25px;position:absolute;height:50%;width:10%;bottom:0px;">&#8595;</div>
                            </div>
                            <!--导入-->
                            <div class="vertical-timeline-block">
                                <div class="vertical-timeline-icon yellow-bg">
                                    <i class="fa fa-cloud-upload"></i>
                                </div>

                                <div class="vertical-timeline-content">
                                    <h5 style="color: #1c84c6;">导入</h5>
                                    <p>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">说明</label>
                                        <div class="col-md-4 control-label" style="text-align: left;color: #0e9aef;">
                                                <span class="vertical-date">
                                                    <small>请点击右侧导入按钮进行试题导入</small>
                                                </span>
                                        </div>
                                        <div class="col-md-1">
                                            <button class="btn btn-sm btn-success" type="button" style="background-color: #008200; color: white;" onclick="examImport()">&nbsp;&nbsp;&nbsp;导&nbsp;&nbsp;&nbsp;入&nbsp;&nbsp;</button>
                                        </div>
                                    </div>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
<script>
    $(document).ready(function () {
        //参数{input类名，选择类型(单选or多选)}
        $(".rdolist").labelauty("rdolist", "rdo");
    });
    /* 文件上传处理样式 */
    document.getElementById("file-id").onchange = function () {
        document.getElementById("file-msg").value = document.getElementById("file-id").value;
    };


    //下载试题模板
    function downloadExamTemplate() {
        var url = "";
        var category = parseInt($(".checked").attr("radio-exam-category-val"));
        switch (category) {
            case 1:
                url = "${ctx}/exam-template/wenda/问答题-腧穴.rar";
                break;
            case 2:
                url = "${ctx}/exam-template/wenda/问答题-内科.rar";
                break;
            case 3:
                url = "${ctx}/exam-template/wenda/问答题-伤科.rar";
                break;
            case 4:
                url = "${ctx}/exam-template/wenda/问答题-妇科.rar";
                break;
            case 5:
                url = "${ctx}/exam-template/wenda/问答题-儿科.rar";
                break;
            case 6:
                url = "${ctx}/exam-template/wenda/问答题-触诊.rar";
                break;
            case 7:
                url = "${ctx}/exam-template/acupoint-location/穴位定位-儿科穴位.rar";
                break;
            case 8:
                url = "${ctx}/exam-template/acupoint-location/穴位定位-成人穴位.rar";
                break;
            case 9:
                url = "${ctx}/exam-template/single-ploy/单项手法-儿科手法.rar";
                break;
            case 10:
                url = "${ctx}/exam-template/single-ploy/单项手法-成人手法.rar";
                break;
            case 11:
                url = "${ctx}/exam-template/single-ploy/单项手法-触诊诊断.rar";
                break;
            case 12:
                url = "${ctx}/exam-template/complete-ploy/成套手法-内科.rar";
                break;
            case 13:
                url = "${ctx}/exam-template/complete-ploy/成套手法-伤科.rar";
                break;
            case 14:
                url = "${ctx}/exam-template/complete-ploy/成套手法-妇科.rar";
                break;
            case 15:
                url = "${ctx}/exam-template/complete-ploy/成套手法-儿科.rar";
                break;
        }
        window.open(url);
    }

    /*试题导入*/
    function examImport() {
        var examFile = $("#form-exam-import input[name='examFile']").val();
        var fileFormat = examFile.substr(examFile.lastIndexOf('.'));
        if (examFile == null || examFile == "") {
            layer.confirm('请选择文件！', {
                btn: ["确认"]
            });
            return;
        } else if (fileFormat != '.docx') {
            layer.confirm('所选文件格式不正确！', {
                btn: ["确认"]
            });
            return;
        }


        var formData = new FormData($('#form-exam-import')[0]);
        $.ajax({
            type: 'post',
            url: '${ctx}/exam/examImport/upload/post',
            cache: false,
            data: formData,
            dataType: "json",
            processData: false,
            contentType: false,
            beforeSend: function () {
                layer.closeAll('dialog');
                layer.msg('正在导入，请稍候', {
                    time: 20000,
                    icon: 16,
                    shade: 0.01
                });
            },
            complete: function () {
                layer.closeAll('loading');
            },
            success: function (data, textStatus) {
                if (data.code==0) {
                    layer.msg(data.msg, {
                        icon: 1,
                        time: 4000
                    });
                }else{
                    layer.alert(data.msg, {
                        icon: 2,
                        closeBtn: 0
                    });
                }
            },
            error: function (data) {
                layer.alert(data.msg, {
                    closeBtn: 0
                });
            }
        });
    }
</script>

</html>